* {
    margin: 0px;
    padding: 0px;
}

.cont {
    width: 640px;
    height: 1136px;
    background-image: url(../images/首页.png);
}

.logo {
    width: 100%;
    height: 150px;
}

.logo img {
    margin: 44px;
}

/* 标题文本 */
.titleBox {
    width: 100%;
    height: 850px;
    text-align: center;
}

.titleBox .tit_a {
    margin-top: -20px;
}

.titleBox .tit_b {
    margin-top: -45px;
    animation: tit_b 1s linear forwards;
}

@keyframes tit_b {
    0% {
        transform: translateY(-213px);
    }

    100% {
        transform: translateY(0px);
    }
}

.titleBox .tit_c {
    margin-top: -35px;
    animation: tit_c 0.7s linear forwards;
    animation-delay: 1s;
    opacity: 0;
    position: relative;
    z-index: 3;
}

@keyframes tit_c {
    0% {
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.titleBox .tit_d {
    margin-top: -25px;
    animation: tit_d 1s forwards;
    animation-delay: 2s;
    opacity: 0;
    position: relative;
    z-index: 3;
}

@keyframes tit_d {
    0% {
        opacity: 1;
        transform: translateY(-50px);
    }

    25% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    75% {
        transform: translateY(0px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


/* 云朵 */
.cloud {
    position: absolute;
}

.cloud_a {
    top: 400px;
    left: 35px;
    animation: cloud_a 4s linear forwards;
}

@keyframes cloud_a {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(250px);
    }
}

.cloud_b {
    top: 520px;
    left: 445px;
    z-index: 9;
    animation: cloud_b 4s linear forwards;
}

@keyframes cloud_b {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(140px);
    }
}

.cloud_c {
    top: 430px;
    left: 515px;
    animation: cloud_c 4s linear forwards;
}

@keyframes cloud_c {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-100px);
    }
}

.cloud_d {
    top: 600px;
    left: 525px;
    animation: cloud_d 4s linear forwards;
}

@keyframes cloud_d {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(140px);
        opacity: 0;
    }
}

.cloud_e {
    top: 620px;
    left: 470px;
    animation: cloud_e 4s linear forwards;
}

@keyframes cloud_e {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-100px);
    }
}

/* 月亮 */
.moonbg {
    position: absolute;
    top: 490px;
    left: 390px;
}

.moon {
    position: absolute;
    top: 540px;
    left: 435px;
    z-index: 10;
}

.txt {
    position: absolute;
}

.txt_a {
    top: 640px;
    left: 45px;
    animation: txt_a 0.5s linear forwards;
    animation-delay: 3.5s;
    transition: 1s;
    opacity: 0;
}

@keyframes txt_a {
    0% {
        opacity: 1;
        transform: rotate(-20deg) scale(0.5);
    }

    25% {
        opacity: 1;
        transform: rotate(10deg) scale(1);
        ;
    }

    50% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
    }

    75% {
        opacity: 1;
        transform: rotate(10deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.txt_b {
    top: 650px;
    left: 440px;
    animation: txt_b 0.5s linear forwards;
    animation-delay: 4s;
    transition: 1s;
    opacity: 0;
}

@keyframes txt_b {
    0% {
        opacity: 1;
        transform: rotate(20deg) scale(0.5);
    }

    25% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
        ;
    }

    50% {
        opacity: 1;
        transform: rotate(10deg) scale(1);
    }

    75% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.txt_c {
    top: 890px;
    left: 40px;
    animation: txt_c 0.5s linear forwards;
    animation-delay: 4.5s;
    transition: 1s;
    opacity: 0;
}

@keyframes txt_c {
    0% {
        opacity: 1;
        transform: rotate(-20deg) scale(0.5);
    }

    25% {
        opacity: 1;
        transform: rotate(10deg) scale(1);
        ;
    }

    50% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
    }

    75% {
        opacity: 1;
        transform: rotate(10deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.txt_d {
    top: 880px;
    left: 450px;
    animation: txt_d 0.5s linear forwards;
    animation-delay: 5s;
    opacity: 0;
}

@keyframes txt_d {
    0% {
        opacity: 1;
        transform: rotate(20deg) scale(0.5);
    }

    25% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
        ;
    }

    50% {
        opacity: 1;
        transform: rotate(10deg) scale(1);
    }

    75% {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* 人物 */
.people {
    position: absolute;
    top: 540px;
    left: 150px;
    animation: people 0.5s linear forwards;
    opacity: 0;
    animation-delay: 2s;
}

@keyframes people {
    0% {
        transform: translateY(-213px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* 测试按钮 */
.bottonBox {
    width: 100%;
    height: 65px;
    text-align: center;
}

.bottonBox input {
    width: 168px;
    height: 66px;
    font-size: 30px;
    font-weight: bold;
    color: #522c00;
    background-color: #ffb800;
    border-radius: 14px;
    border: 1px solid black;
    animation: input 1s linear forwards;
    animation-delay: 5.5s;
    opacity: 0;
    transform-origin: 50% 50%;
}

@keyframes input {
    0% {
        opacity: 1;
        transform: scale(1.3, 0.7);

    }

    25% {
        opacity: 1;
        transform: scale(0.7, 1.3);

    }

    50% {
        opacity: 1;
        transform: scale(1.2, 0.8);
    }

    70% {
        opacity: 1;
        transform: scale(0.8, 1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}